<template>
  <div>
    <!-- 外层 -->
    <el-dialog
      title="批量巡检"
      :visible.sync="TEDNestedOuterVisible"
      @open="OpenTENestedDialog"
    >
      <el-table
        :data="tableDatafn"
        border
        stripe
        style="width: 100%"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <template v-for="item in dataBaseItem">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :fit="true"
            :key="item.ID"
            :sortable="item.sortable"
            align="center"
          >
            <template v-slot="scope">
              <template v-if="item.prop == 'REPORT'">
                <el-button type="info" @click="serverDialog(scope.row)" :loading="scope.row.ButtonLoading"
                  >巡检</el-button
                >
              </template>
              <template v-else-if="item.prop == 'ALERT_LEVELCONFIG'">
                <div>
                  {{ alertLevelConfigOptionText(scope.row[item.prop]) }}
                </div>
              </template>

              <template v-else>
                {{ scope.row[item.prop] }}
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-popover placement="top" width="160" v-model="visible">
          <p>确定关闭吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="CloseTENestedDialog" 
              >确定</el-button
            >
          </div>
          <el-button  slot="reference"
            >关闭</el-button
          >
        </el-popover>
      </div>
    </el-dialog>

    <!-- 内层 -->
    <el-dialog
      width="90%"
      title="一键巡检报告"
      :visible.sync="innerVisible"
      append-to-body
    >
      <component
        :is="currentTabComponent"
        :info="infoData"
        v-if="innerVisible"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import { dataBaseItem } from "./dialogItem";
import { submitAdmin,TryLinkDataBase } from "@/api/index.js";
import vDataBase from "./TEDatabaseDialog.vue";
import vSever from "./dialogServer";
import { getDataBaseAllData } from "./GetTEDataBaseData";
export default {
  data() {
    return {
      // outerVisible: false,
      innerVisible: false,
      dataBaseItem: dataBaseItem,
      loading: false,
      infoData: {},
      servicesNameOption: [],
      barData: {
        searchIP: "",
        startTime: "2020-10-10 00:00:00",
        endTime: "2020-11-01 00:00:00",
      },
      currentTabComponent: "",
      visible: false,
      TABLEDATA:[]
      
      
    };
  },
  components: {
    vDataBase,
    vSever,
  },
  props: { tableData: Array, TEDNestedOuterVisible: null },
  computed: {
    tableDatafn() {
      return this.tableData.concat().filter((item) => {
        return item;
      });
    },
  },
  created() {
    this.InitData();
  },
  methods: {
    serverDialog(data) {
      if(data.type=="DataBase"){
        this.ThisInspection(data)
      }else{
        this.innerVisible = true;

      this.infoData = {
        ip: data.IP,
        type: data.type,
        time: this.barData.startTime,
        time2: this.barData.endTime,
        dbSid: data.dbSid,
      };

      }
      
    },
    InitData() {
      
      let _postData = {
        opera: "GetServicesName",
        curPage: 1,
        pageSize: 10000,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "exactquery", // 精确查询
        filters: {},
      };
      submitAdmin({
        postData: JSON.stringify(_postData),
      }).then((res) => {
        this.servicesNameOption = res.data;
      });
    },
    alertLevelConfigOptionText(id) {
      let _text = "";
      this.servicesNameOption.forEach((element) => {
        if (element.BID == id) {
          _text = element.NAME;
        }
      });

      return _text;
    },
    CloseTENestedDialog() {
      this.visible=false;
      this.$emit("CloseTENestedDialog");
    },
    OpenTENestedDialog() {
      this.currentTabComponent =
        this.tableData[0].type == "DataBase" ? "vDataBase" : "vSever";
    },
    async ThisInspection(data) {
      data.ButtonLoading = true;

      //检查是否可连接
      let tryData = {
        dbtype: data.DBTYPE,
        ip: data.IP,
        port: data.PORT,
        sid: data.DB_SID,
        user: data.DB_USER_S,
        password: data.DB_PWD_S,
      };

      let TryStatus = "";

      await TryLinkDataBase({ ...tryData })
        .then((_) => {
          TryStatus = _;
        })
        .catch((_) => {
          this.$message.warning({
            message: "操作失败,系统无法与该设备连接2",
            duration: 3000,
          });
        })
        .finally((_) => {});

      if (TryStatus == 1) {
        // this.info = {
        //   ip: data.ip,
        //   type: data.type,
        //   time: this.barData.startTime,
        //   time2: this.barData.endTime,
        //   dbSid: data.dbSid,
        // };

        getDataBaseAllData({
          ip: data.IP,
          sid: data.DB_SID,
        })
          .then((_) => {
            
            this.infoData = {
              type: data.type,
              DATA: _,
              Basis:{
              DBname:data.DB_SID,
              ip:data.IP
              }
            };
            this.innerVisible = true;
            //延迟一下
            setTimeout((_) => {
              data.ButtonLoading = false;
            }, 1000);
          })
          .catch((_) => {
            this.$message({
              type: "error",
              message: "系统错误，请稍后重试",
            });
          });
      } else {
        this.$message.warning({
          message: "操作失败,系统无法与该设备连接3",
          duration: 3000,
        });
      }
    },
  },
};
</script>